<template>
  <div id="editorform" class="ace-editor" :style="style"></div>
</template>

<script lang="ts">
import { 
	ref, watch, onMounted, onUnmounted
} from 'vue';
import "/@/assets/ace/ace"
import "/@/assets/ace/theme-textmate"
import "/@/assets/ace/mode-velocity"
import "/@/assets/ace/mode-java"
import "/@/assets/ace/mode-html"
import "/@/assets/ace/mode-javascript"
import "/@/assets/ace/mode-json"
import "/@/assets/ace/mode-yaml"
import "/@/assets/ace/mode-lua"
import "/@/assets/ace/mode-nginx"
import "/@/assets/ace/mode-sql"
import "/@/assets/ace/mode-xml"

interface UpdateEditor {
	readOnly: Boolean;
	value?: String;
	mode: String,
	tabSize: Number
}
const modePre = "ace/mode/"

export default {
  name: 'MyAceEditor',
	props: {
		content: { type: String, required: false},
		tabSize: { type: Number, required: false, default: 4},
		mode: { type: String, required: false, default: "velocity"},
		style: { type: String, required: false, default: ""},
		readOnly: { type: Boolean, required: false, default: false},
	},
	emits: ['update:content'],
	setup(props, { emit }) {
		const isInit = ref(false)
		let editor = null // ace加载实例

		const updateEditor = ({
			readOnly, mode, value, tabSize
		}: UpdateEditor) => {
			editor = ace.edit("editorform");
			if (editor) {
				editor.destroy()
				editor = null
			}
			editor = ace.edit("editorform");
			if (!editor) {
				return
			}
			// 使用dracula主题
			editor.setTheme("ace/theme/textmate");
			editor.setOptions({
				// 只读
				readOnly: readOnly,
				// 启用滚动
				autoScrollEditorIntoView: true,
				// 启用换行
				wrap: false,
				mode: modePre + mode,
				tabSize: tabSize,
				fontSize: '16px',
				// 启用自动滚动到底部  0, 0.5, and 1
				scrollPastEnd: 0,
				// 显示参考线
				showPrintMargin: false,
				// // 代码提示和自动补全
				// enableSnippets: true,
				// enableLiveAutocompletion: true,
				// enableBasicAutocompletion: true,
			})

			editor.getSession().on('change', function(e) {
				// 获取编辑器最新内容
				emit('update:content', editor.getValue())
				// editor.gotoLine(editor.selection.getCursor());
			});
			if (value) {
				editor.setValue(value)
				editor.gotoLine(0);
			}
		}
		onMounted(() => {
			updateEditor({
				readOnly: props.readOnly, mode: props.mode
			})
		})

		onUnmounted(() => {
			if (editor) {
				//实例销毁
				console.log("destroy")
				editor.destroy();
			}
		})
		watch(
			() => props.content,
			(val) => {
				if (!isInit.value && val && editor) {
					isInit.value = true
					editor.setValue(val)
					// 光标跳转到几行几列  清楚设置内容后自动选中的效果
					// editor.gotoLine(editor.session.getLength());
					editor.gotoLine(0);
				}
			},
			{ deep: true, immediate: true }
		);
		
		const reset = () => {
			editor.setValue("")
			isInit.value = false
		}

		const insert = (context) => {
			// 在光标处插入
			editor.insert(context);
		}
		return {
			insert, reset, updateEditor
		}
	}
}
</script>

<style lang="less" scoped>

.ace_editor {
	position: relative !important;
	border: 1px solid lightgray;
	margin: auto;
	height: 200px;
	width: 80%;
	.fullScreen {
		height: auto;
		width: auto;
		border: 0;
		margin: 0;
		position: fixed !important;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		z-index: 10;
	}
}

</style>